<template>
  <div class="p-2">
    <el-form ref="StConfigLscFormRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="迭代次数" prop="epochs">
        <el-input v-model="form.epochs" placeholder="请输入训练迭代次数" />
      </el-form-item>
      <el-form-item label="批量大小" prop="batchSize">
        <el-input v-model="form.batchSize" placeholder="请输入批量大小" />
      </el-form-item>
      <el-form-item label="优化器" prop="optimizer">
        <el-radio-group v-model="form.optimizer">
          <el-radio v-for="option in lsc_optimiz_type" :key="option.value" :label="option.value" border>{{ option.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="初始学习率" prop="learningRate">
        <el-input v-model="form.learningRate" placeholder="请输入初始学习率" style="width: 200px;" />
        <el-select v-model="form.lrDegrade" placeholder="学习率衰减策略" style="margin-left: 10px">
          <el-option v-for="dict in lsc_lr_degrade" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="z折交叉验证" prop="zCross">
        <el-input v-model="form.zthCross" placeholder="请输入z折交叉验证" style="width: 200px;" :disabled="isNeedZ" />
        <el-checkbox border style="margin-left: 10px;" @change="handleChangeZ">不使用交叉验证</el-checkbox>
      </el-form-item>
      <el-form-item label="损失函数" prop="lossFunc">
        <el-select v-model="form.lossFunc" placeholder="请选择损失函数" clearable>
          <el-option v-for="dict in lsc_loss_func" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button type="warning" @click="reset">重 置</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script setup name="ConfigLsc" lang="ts">
import { listStConfigLsc, getStConfigLsc, delStConfigLsc, addStConfigLsc, updateStConfigLsc } from '@/api/lsc/configLsc';
import { StConfigLscVO, StConfigLscQuery, StConfigLscForm } from '@/api/lsc/configLsc/types';
import { propTypes } from "@/utils/propTypes";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps({
  stragyId: propTypes.string.def("")
})

const configLscList = ref<StConfigLscVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const isNeedZ = ref(false);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();
const StConfigLscFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});
onMounted(() => {
  init()
})

const {lsc_optimiz_type, lsc_loss_func, lsc_lr_degrade} = toRefs<any>(proxy?.useDict('lsc_optimiz_type', 'lsc_loss_func', 'lsc_lr_degrade'))
const init = () => {
  console.log("stragyId", props.stragyId)
  handleUpdate(props.stragyId);
}
const initFormData: StConfigLscForm = {
  id: undefined,
  stragyId: undefined,
  epochs: undefined,
  optimizer: undefined,
  zthCross: undefined,
  learningRate: undefined,
  batchSize: undefined,
  lossFunc: undefined,
  lrDegrade: undefined,
}
const data = reactive<PageData<StConfigLscForm, StConfigLscQuery>>({
  form: {...initFormData},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    stragyId: undefined,
    epochs: undefined,
    optimizer: undefined,
    zthCross: undefined,
    learningRate: undefined,
    batchSize: undefined,
    lossFunc: undefined,
    params: {
    }
  },
  rules: {
    id: [
      { required: true, message: "不能为空", trigger: "blur" }
    ],
    stragyId: [
      { required: true, message: "训练策略id不能为空", trigger: "blur" }
    ],
    epochs: [
      { required: true, message: "训练迭代次数不能为空", trigger: "blur" }
    ],
    optimizer: [
      { required: true, message: "优化器不能为空", trigger: "blur" }
    ],
    zthCross: [
      { required: true, message: "z折交叉验证不能为空", trigger: "blur" }
    ],
    learningRate: [
      { required: true, message: "学习率不能为空", trigger: "blur" }
    ],
    batchSize: [
      { required: true, message: "批量大小不能为空", trigger: "blur" }
    ],
    lossFunc: [
      { required: true, message: "损失函数不能为空", trigger: "blur" }
    ],
    lrDegrade: [
      { required: true, message: "学习率衰减不能为空", trigger: "blur" }
    ],
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询【请填写功能名称】列表 */
const getList = async () => {
  loading.value = true;
  const res = await listStConfigLsc(queryParams.value);
  configLscList.value = res.rows;
  total.value = res.total;
  loading.value = false;
}

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
}

/** 表单重置 */
const reset = () => {
  form.value = {...initFormData};
  StConfigLscFormRef.value?.resetFields();
}
const handleChangeZ = () => {
  isNeedZ.value = !isNeedZ.value;
  if (isNeedZ.value) {
    form.value.zthCross = 0;
  }
}
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
}


/** 提交按钮 */
const submitForm = () => {
  form.value.stragyId = props.stragyId;
  console.log("form", form.value)
  StConfigLscFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.id) {
        await updateStConfigLsc(form.value).finally(() =>  buttonLoading.value = false);
      } else {
        await addStConfigLsc(form.value).finally(() =>  buttonLoading.value = false);
      }
      proxy?.$modal.msgSuccess("修改成功");
      dialog.visible = false;
      await getList();
    }
  });
}

/** 删除按钮操作 */
const handleDelete = async (row?: StConfigLscVO) => {
  const _ids = row?.id || ids.value;
  await proxy?.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
  await delStConfigLsc(_ids);
  proxy?.$modal.msgSuccess("删除成功");
  await getList();
}

/** 修改按钮操作 */
const handleUpdate = async (rowId: string) => {
  reset();
  const res = await getStConfigLsc(rowId);
  Object.assign(form.value, res.data);
}

/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download('system/configLsc/export', {
    ...queryParams.value
  }, `configLsc_${new Date().getTime()}.xlsx`)
}

onMounted(() => {
  getList();
});
</script>

<style>
.dialog-footer{
  text-align: center;
}
</style>
